<html>
<body>
<h2>Hello World!</h2>
<button id="fetchDataButton">Fetch Data</button>
<script>
    // 使用 JavaScript 实现跳转到 Servlet
    // document.getElementById("fetchDataButton").addEventListener("click", function () {
    //     window.location.href = "/web_27_jsp_gongsi/data"; // 根据实际项目的 context path 修改 URL
    // });
    // 使用 JavaScript 实现新窗口打开 Servlet
    document.getElementById("fetchDataButton").addEventListener("click", function () {
        // 在新窗口中打开 DataServlet 的页面
        window.open("/web_27_jsp_gongsi/data", "_blank");
    });

    // document.getElementById("fetchDataButton").onclick = function () {
    //     window.open("/web_27_jsp_gongsi/data", "_blank");
    // };
</script>
</body>
</html>

<%--
addEventListener、onclick的区别
addEventListener 和 onclick 都可以用来添加事件处理器（event handler），但它们有一些重要的区别和适用场景：

区别分析

1. 支持多个事件处理器

	•	addEventListener:
	•	可以为同一个事件添加多个事件处理器，它们会按添加的顺序依次执行。
	•	例如：

const button = document.getElementById("fetchDataButton");

button.addEventListener("click", () => {
    console.log("Handler 1");
});

button.addEventListener("click", () => {
    console.log("Handler 2");
});

输出:

Handler 1
Handler 2


	•	onclick:
	•	只能指定一个事件处理器，如果重新赋值，会覆盖之前的事件处理器。
	•	例如：

const button = document.getElementById("fetchDataButton");

button.onclick = () => {
    console.log("Handler 1");
};

button.onclick = () => {
    console.log("Handler 2");
};

输出:

Handler 2



2. 事件移除

	•	addEventListener:
	•	可以通过 removeEventListener 方法移除指定的事件处理器。
	•	例如：

function handleClick() {
    console.log("Clicked!");
}

const button = document.getElementById("fetchDataButton");

button.addEventListener("click", handleClick);

// 移除事件处理器
button.removeEventListener("click", handleClick);


	•	onclick:
	•	不能直接移除特定的事件处理器，只能通过将 onclick 赋值为 null 来移除所有的处理器。
	•	例如：

const button = document.getElementById("fetchDataButton");

button.onclick = () => {
    console.log("Clicked!");
};

// 移除事件处理器
button.onclick = null;



3. 事件类型

	•	addEventListener:
	•	可以为同一元素绑定不同类型的事件（如 click、mouseover 等）。
	•	支持事件捕获（通过第三个参数设置为 true）和冒泡阶段的处理。
	•	onclick:
	•	只能绑定 onclick 事件，且只在事件冒泡阶段触发。

4. 兼容性

	•	addEventListener:
	•	是更现代的方法，在主流浏览器中表现一致。
	•	不支持 IE8 及更早版本。
	•	onclick:
	•	兼容性更好，即使在老旧浏览器中（如 IE6/7/8）也能正常工作。

建议使用场景

	1.	简单场景:
	•	如果只需要绑定一个事件处理器，并且不需要移除它，可以使用 onclick，因为它语法简单。

const button = document.getElementById("fetchDataButton");
button.onclick = () => {
    console.log("Clicked!");
};


	2.	复杂场景:
	•	如果需要为同一个元素添加多个事件处理器，或者需要动态添加/移除事件处理器，推荐使用 addEventListener。

const button = document.getElementById("fetchDataButton");

function handleClick() {
    console.log("Clicked!");
}

button.addEventListener("click", handleClick);

// 动态移除
button.removeEventListener("click", handleClick);

在你的案例中

你可以用 onclick 替代 addEventListener，但如果有以下需求，建议保留 addEventListener：
	•	需要为同一个按钮绑定多个事件处理器。
	•	可能需要移除特定的事件处理器。

如果只是实现一个简单的点击事件处理逻辑，onclick 是完全可行的：

document.getElementById("fetchDataButton").onclick = function () {
    window.open("/web_27_jsp_gongsi/data", "_blank");
};


--%>